<template>
  <div class="container" id="container"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      overlay: []
    };
  },
  mounted() {
    // this.initMap();
  },
  methods: {
    initMap(fullDistrictName) {
      this.$nextTick(() => {
        let bottom_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 左下角，添加比例尺
        // let top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        let bottom_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //包含平移和缩放按钮

        this.map = new BMap.Map('container', {enableMapClick: false});
        // let point = new BMap.Point(116.404, 39.915);
        this.map.centerAndZoom(fullDistrictName, 15);
        this.map.addControl(bottom_left_control);
        this.map.addControl(bottom_right_navigation);
        this.map.enableScrollWheelZoom();
      });
    },
    // 添加门店图标
    initStoreMap(obj) {
      this.overlay.forEach(item => {
        item.hide();
      });
      this.$http.post('backend', `/web/statistics/home/statisticAreaStoreCount`, obj).then(res => {
        //设置marker图标为水滴
        if (res.data.length && res.data[0].storeInfos.length) {
          res.data[0].storeInfos.forEach(item => {
            let point = new BMap.Point(item.longitude, item.latitude);
            let vectorMarker = new BMap.Marker(point, { // item.latitude - 0.03
              // 指定Marker的icon属性为Symbol
              icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
                scale: 2, //图标缩放大小
                fillColor: 'orange', //填充颜色
                fillOpacity: 0.8//填充透明度
              })
            });
            let opts = {
              width: 280, // 信息窗口宽度
              height: 170, // 信息窗口高度
              title: `<span style="font-size: 18px;font-weight: bold;">${item.name}[${item.code}]</span>`, // 信息窗口标题
              enableMessage: true, //设置允许信息窗发送短息
              message: ''
            };
            let content = `<div style="color: #999999"><div style="margin: 5px 0">品牌：${item.orgName}</div>
               <div style="margin: 5px 0">类型：${item.isDirectSale ? '直营' : '加盟'}</div>
               <div style="margin: 5px 0">负责人：${item.contacts}</div>
               <div style="margin: 5px 0">电话：${item.tel}</div>
               <div style="margin: 5px 0">地址：${item.address}</div></div>`;
            let infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
            const that = this;
            vectorMarker.addEventListener('click', function() {
              that.map.openInfoWindow(infoWindow, point); //开启信息窗口
            });

            this.overlay.push(vectorMarker);
            this.map.addOverlay(vectorMarker);
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
:deep(.BMap_bubble_title){
  margin-top: 10px;
}
.container{
  width: 100%;
  height: 94vh;
}
</style>
